<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>管理员管理界面</title>
		<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="../js/jquery-3.5.1.js"></script>
		<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<nav class="navbar navbar-default">
			  <div class="container-fluid ">
			    <!-- Brand and toggle get grouped for better mobile display -->
			    <div class="navbar-header ">
			      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			        <span class="sr-only">Toggle navigation</span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			      </button>
				  <h2>宿舍管理员管理</h2>
			      <!-- <a class="navbar-brand" href="#">书本商城</a> -->
			    </div>
			
			    <!-- Collect the nav links, forms, and other content for toggling -->
			    
			  </div><!-- /.container-fluid -->
			</nav>
			<div class="panel panel-info">
			  <div class="panel-heading">
				  <button type="button" class="btn btn-success btn-sm" onclick="add()">添加</button>
				  <button type="button" id="delete_all">批量删除</button>
				  <div class="pull-right">
					  <!-- Single button -->
					  <div class="btn-group">
					    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					      Action <span class="caret"></span>
					    </button>
					    <ul class="dropdown-menu">
					      <li><a href="#">Action</a></li>
					      <li><a href="#">Another action</a></li>
					      <li><a href="#">Something else here</a></li>
					      <li role="separator" class="divider"></li>
					      <li><a href="#">Separated link</a></li>
					    </ul>
					  </div>
				  <form style="display: inline-block;" class="form-inline">
				  	
				  	<div class="form-group">
				  	    <input type="text" class="form-control input-sm" id="ipt_top" >
				  	  </div>
					  
				  	<button type="button" class="btn btn-default btn-sm btn-primary" onclick="search()">搜索</button>
				  </form>
				  	
				  </div>
			  </div>
			  <div class="panel-body">
			    <table class="table table-striped table-bordered table-hover" id="mytable">
			    	<thead>
			    		<tr>
			    			<th>编号</th>
			    			<th>姓名</th>
			    			<th>性别</th>
			    			<th>电话</th>
			    			<th>宿舍楼</th>
							<th>用户名</th>
			    			<th>操作</th>
			    		</tr>
			    	</thead>
			    	<tbody>
			    		
			    	</tbody>
			    </table>
			  </div>
			</div>
		</div>
		<script type="text/javascript">
			let adminarr1=[
				{id:0,name:"六月",Gender:"男",address:"1栋",Telephone: "18154762519",password: 123456}
			]
			let adminarr = JSON.parse(localStorage.getItem("adminarr"));
			if (!adminarr) {
				adminarr = adminarr1;
				localStorage.setItem("adminarr",JSON.stringify(adminarr));
			};
			let $tbody = $("table").find("tbody");
			function load(search){
				for (let index in adminarr) {
					//搜索判断
					let item=adminarr[index];
					if(search && item.name.toLowerCase().indexOf(search.toLowerCase()) === -1) {
						continue;
					}
					let tr=`
					<tr>
					<td><input type="checkbox" name="cb_select" />${item.id}</td>
					<td>${item.name}</td>
					<td>${item.Gender}</td>
					<td>${item.Telephone}</td>
					<td>${item.address}</td>
					<td>${item.name}</td>
					<td>
					<button type="button" class="btn btn-danger btn-sm" onclick="del(${index})">删除</button>
					<button type="button" class="btn btn-info btn-sm" onclick="edit(${index})">编辑</button>
					</td>
					</tr>
					`;
					$tbody.append(tr);
				}
			}
			//添加
			function add(){
				location.href="yem_add.html"
			}
			//删除
			function del(index){
				adminarr.splice(index,1);
				$tbody.empty();
				load();
				localStorage.setItem("adminarr",JSON.stringify(adminarr));
			}
			//编辑
			function edit(index){
				let item1=adminarr[index];
				sessionStorage.setItem("editname",JSON.stringify(item1));
				adminarr.splice(index,1);
				localStorage.setItem("adminarr",JSON.stringify(adminarr));
				location.href="yem_add.html";
			}
			//搜索
			function search(){
				//获取输入框内容id="ipt_top"
				let search=$("input[id='ipt_top']").val();
				$tbody.empty();
				load(search);
			}
			$("#delete_all").click(function() {
				//获取选中的checkbox
				$("input[name='cb_select']:checked").each(function(index, item) {
					$(this).parent().parent().empty();
					adminarr.splice($(this).val(), 1);
					let tr = $(this).parent().parent();
					 tr.remove();
					 localStorage.setItem("adminarr",JSON.stringify(adminarr)); 
					console.log(this.value);
				});
			});
			load();
		</script>
	</body>
</html>
